<template>
	<view class="container">
		<u-navbar title='账单详情' :title-bold='true' :border-bottom='false' ></u-navbar>
		<p class="a">交易金额</p>
		<p class="b">{{detail.money}}</p>
		<view class="c" v-if="type==2">
			<view  class="c1"  >
				<view  class="icon"></view>
				<p class="p1">提现申请</p>
				<p class="p2">{{detail.addtime}}</p>
				<u-line  length="100%" color="#6EC9E1" />
			</view>
			<view  class="c1"  >
				<view  class="icon"></view>
				<p class="p1">提现处理中</p>
				<p class="p2">{{detail.addtime}}</p>
				<u-line v-if="detail.withdrawalstatus" length="100%" color="#6EC9E1" />
			</view>
			<view  class="c1" v-if="detail.withdrawalstatus" >
				<image style="width: 16px;" src="../../static/icon/sure2.png" mode="widthFix"></image>
				<p class="p1">提现成功</p>
				<p class="p2">{{detail.withdrawaltime}}</p>
			</view>
		</view>
		<view class="card">
			<text>交易类型</text>
			<span>{{detail.typeName}}</span>
		</view>
		<view class="card">
			<text>创建时间</text>
			<span>{{detail.createtime}}</span>
		</view>
		<view class="card">
			<text>流水号</text>
			<span>{{detail.number}}</span>
		</view>
		<view class="card">
			<text>备注</text>
			<span>{{detail.memo||'--'}}</span>
		</view>
	</view>
</template>

<script>
	import {moneyDetail} from '@/api/index.js'
	export default{
		data(){
			return{
				type:1,
				detail:''
			}
		},
		onLoad(e) {
			this.type=e.type
			this.init(e.id)
		},

		methods:{
			init(id){
				moneyDetail({id:id}).then(res=>{
					if(res.code==1){
						this.detail=res.data.detail
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" >

	.container{
		background-color: #FFF;
		font-size: 16px;
		text-align: center;
		padding:20px 15px;
		
		
		.card{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;
			font-size: 15px;
			padding: 0 10rpx;
			span{
				font-size: 14px;
				color: #666666;
			}
		}
		
		.a{
			color: #999999;
			font-size: 13px;
			margin-top: 20px;
		}
		.b{
			font-size: 30px;
			color: #333333;
		}
		.p1{
			font-size: 13px;
			color: #6EC9E1;
			margin: 8px 0 4px 0;
		}
		
		.p2{
			font-size: 11px;
			color: #666666;
		}
		.c{
			margin-top: 20px;
			display: flex;
			align-items: center;
			width: 100%;
			.c1{
				flex: 1;
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				position: relative;
			}
			u-line{
				position: absolute;
				width: 80%;
				top: 8px;
				left: 60%;
			}
			.icon{
				height: 16px;width: 16px;
				box-sizing: border-box;
				border: 1px solid #6EC9E1;
				border-radius: 50%;
			}
		}
	}
</style>